<template>
  <a-drawer
    :width="340"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    unmountOnClose
  >
    <template #title> 审批人设置 </template>
    <div class="item">
      <a-space direction="vertical" size="large">
        <a-radio-group v-model="approverConfig.value.approverType">
          <a-radio :value="1">指定成员</a-radio>
          <a-radio :value="2">角色</a-radio>
          <a-radio :value="3">上级</a-radio>
        </a-radio-group>
      </a-space>
    </div>
    <div>
      <a-form
        auto-label-width
        ref="demandTemplateRef"
        layout="vertical"
        :model="approverConfig"
      >
        <a-form-item
          v-show="approverConfig.value.approverType === 1"
          field="tempName"
          label="选择指定成员"
          validate-trigger="input"
          required
        >
          <a-input-tag
            v-model="personTags"
            :style="{ width: '320px' }"
            placeholder="请选择"
            @click="gg()"
            @remove="removeTag($event)"
          />
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.approverType === 2"
          field="tempName"
          label="选择角色"
          validate-trigger="input"
          required
        >
          <a-select v-model="roleValue" placeholder="请选择" allow-clear>
            <a-option v-for="role in roleList" :key="role.id">{{
              role.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          class="item"
          v-show="approverConfig.value.approverType === 2"
          field="tempName"
          label="人员姓名"
          validate-trigger="input"
          required
        >
          <a-input-tag
            :default-value="['test']"
            :style="{ width: '320px' }"
            placeholder="系统自动读取"
          />
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.approverType === 3"
          field="tempName"
          label="选择上级"
          validate-trigger="input"
          required
        >
          <div style="white-space: nowrap; margin-right: 10px">发起人的</div>
          <a-select
            v-model="roleValue"
            placeholder="Please select ..."
            allow-clear
          >
            <a-option>Beijing</a-option>
            <a-option>Shanghai</a-option>
            <a-option>Guangzhou</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-show="approverConfig.value.approverType === 3"
          field="tempName"
          label="人员姓名"
          validate-trigger="input"
          required
        >
          <a-input-tag
            :default-value="['test']"
            :style="{ width: '320px' }"
            placeholder="系统自动读取"
          />
        </a-form-item>
        <a-form-item
          class="item"
          field="tempName"
          label="多人审批时采用的审批方式"
          validate-trigger="input"
          required
        >
          <a-space size="large">
            <a-radio-group v-model="approverConfig.value.auditType">
              <a-radio :value="2">会签（需所有审批人同意）</a-radio>
              <a-radio :value="1">或签（一名审批人同意或拒绝即可）</a-radio>
            </a-radio-group>
          </a-space>
        </a-form-item>
        <a-form-item
          class="item"
          field="tempName"
          label="审批人为空时"
          validate-trigger="input"
          required
        >
          <a-space size="large">
            <a-radio-group v-model="approverConfig.value.approverIsEmpty">
              <a-radio :value="1">自动跳过本节点</a-radio>
              <a-radio :value="2">自动转交管理员</a-radio>
            </a-radio-group>
          </a-space>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
  <a-modal v-model:visible="rorleVisible" @ok="roleOk" @cancel="roleCancel">
    <template #title> Title </template>
    <div>
      <div
        v-for="person in personList"
        :key="person.id"
        @click="roleChoise(person)"
        >{{ person.name }}</div
      >
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, watch, onMounted, reactive } from 'vue';
  import { useFlowStore } from '@/store';
  import { gainRole } from '@/api/home/System settings/roles-permissions';
  import { GetOrganizationchart } from '@/api/home/System settings/organizational-structure';

  let emits = defineEmits(['update:nodeConfig']);
  const store = useFlowStore();
  const roleValue = ref();
  const rorleVisible = ref(false);

  const gg = () => {
    rorleVisible.value = true;
  };
  const roleOk = () => {
    rorleVisible.value = false;
  };
  const roleCancel = () => {
    rorleVisible.value = false;
  };

  let approverConfig = ref({});
  watch(
    () => store.approverConfig1,
    (newVal, oldVal) => {
      approverConfig.value = store.approverConfig1;
    },
    { deep: true }
  );
  const roleTags = computed(() => {
    let tags: any = [];
    if (approverConfig.value.value.nodeUserList?.length > 0) {
      approverConfig.value.value.nodeUserList.forEach((element: any) => {
        tags.push(element.name);
      });
    }
    return tags;
  });
  const personTags = computed(() => {
    let tags: any = [];
    if (approverConfig.value.value.nodeUserList?.length > 0) {
      approverConfig.value.value.nodeUserList.forEach((element: any) => {
        tags.push(element.userStaffName);
      });
    }

    return tags;
  });
  // 删除指定成员
  const removeTag = (name: string) => {
    if (approverConfig.value.value.nodeUserList?.length > 0) {
      approverConfig.value.value.nodeUserList.splice(
        approverConfig.value.value.nodeUserList.findIndex(
          (item) => item.userStaffName === name
        ),
        1
      );
    }
  };
  const closeDrawer = () => {
    store.setApprover(false);
  };
  let visible = computed({
    get() {
      return store.approverDrawer;
    },
    set() {
      closeDrawer();
    },
  });
  const handleOk = () => {
    store.setApproverConfig({
      value: approverConfig.value,
      flag: true,
      id: approverConfig.value.id,
    });
    emits('update:nodeConfig', approverConfig.value);
    store.setApprover(false);
  };
  const handleCancel = () => {
    store.setApprover(false);
  };
  const roleChoise = (role: any) => {
    let obj = {};
    obj.type = 1;
    obj.userStaffId = role.id;
    obj.userStaffName = role.name;
    approverConfig.value.value.nodeUserList.push(obj);
  };
  // 获取角色下拉列表
  const roleList = ref([]);
  const getRoleList = async () => {
    let res = await gainRole();
    roleList.value = res;
  };
  // 获取人员列表
  const personList = ref([]);
  const getPerson = async () => {
    let res = await GetOrganizationchart();
    personList.value = res.staff;
  };
  onMounted(() => {
    getRoleList();
    getPerson();
  });
</script>

<style lang="less" scoped>
  .item {
    padding-bottom: 16px;
    margin: 8px 0;
    border-bottom: 1px solid #eee;
  }
</style>
